<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/static/lib/layui-v2.8.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/index/css/public.css}" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }
        .top-panel > .layui-card-body{
            height: 60px;
        }
        .top-panel-number{
            line-height:60px;
            font-size: 30px;
            border-right:1px solid #eceff9;
        }
        .top-panel-tips{
            line-height:30px;
            font-size: 12px
        }
    </style>
</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main" id="app">

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md6">

            <div class="layui-card top-panel">
                <div class="layui-card-header">房间入住情况</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md-offset5 layui-col-md3 top-panel-number">
                            <a style="color: #bd3004">{{ room.used / room.total * 100}} %</a>
                        </div>
                        <div class="layui-col-xs3 layui-col-md-offset1 layui-col-md3 top-panel-tips">
                            总数 <a style="color: #1aa094">{{ room.total }}</a><br>
                            已入住 <a style="color: #bd3004">{{ room.used }}</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md6">

            <div class="layui-card top-panel">
                <div class="layui-card-header">收入</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md-offset2 layui-col-md7 top-panel-number">
                            {{ income.today / 100.0}} 元
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #bd3004" v-if="income.today - income.yesterday > 0">▲ {{ (income.today / 100.0 - income.yesterday / 100.0) }} 元</a>
                            <a style="color: #1aa094" v-if="income.today - income.yesterday < 0">▼ {{ Math.abs(income.today / 100.0 - income.yesterday / 100.0) }} 元</a>
                            <br>
                            比七日 <a style="color: #bd3004" v-if="income.today - income.week > 0">▲ {{ (income.today / 100.0 - income.week / 100.0 / 7)}} 元</a>
                            <a style="color: #1aa094" v-if="income.today - income.week < 0">▼ {{ Math.abs((income.today / 100.0 - income.week / 100.0 / 7)).toFixed(2)}} 元</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md9">
            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>



</div>
<!--</div>-->
<script th:src="@{/static/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/static/lib/layui-v2.8.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/static/index/js/lay-config.js?v=1.0.4}" charset="utf-8"></script>
<script src="/static/lib/vue/vue.global.js"></script>
<script th:inline="javascript">
    let ctx = [[${#httpServletRequest.getContextPath()}]];
</script>
<script>

    const options = {
        data(){
            return {
                room: {
                    total: 1,
                    used: 0,
                },
                // 收入
                income: {
                    today: 0,
                    yesterday: 1,
                    week: 1,
                },
                // 7 天收入
                incomeRecords: {
                    date: [],
                    value: [],
                },
            }
        },
        methods:{
            init(){
                let _that = this;
                // 获取房间信息
                $.ajax({
                    url: ctx + '/welcome/room',
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 200) {
                            _that.room.total = res.data.total;
                            _that.room.used = res.data.used;
                        } else {
                            layer.msg(res.msg, {icon: 2}, 3000);
                        }
                    },
                    error: function (e) {
                        layer.msg('服务器错误', {icon: 2}, 3000);
                    }
                });
                // 获取收入信息
                $.ajax({
                    url: ctx + '/welcome/income',
                    type: 'get',
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 200) {
                            _that.income.today = res.data[0];
                            _that.income.yesterday = res.data[1];
                            _that.income.week = res.data[2];
                        } else {
                            layer.msg(res.msg, {icon: 2}, 3000);
                        }
                    },
                    error: function (e) {
                        layer.msg('服务器错误', {icon: 2}, 3000);
                    }
                });
            },
            initChart(){
                let _that = this;
                layui.use('echarts', function(){
                    let echarts = layui.echarts;
                    /**
                     * 报表功能
                     */
                    var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');


                    // 请求数据
                    $.ajax({
                        url: ctx + '/welcome/incomeByDate',
                        type: 'get',
                        dataType: 'json',
                        success: function (res) {
                            if (res.code === 200) {
                                _that.incomeRecords.date = res.data.date;
                                for(var item of res.data.income){
                                    _that.incomeRecords.value.push(item / 100.0);
                                }
                                var optionRecords = {
                                    title: {
                                        text: '最近七日收入',
                                    },
                                    legend: {},
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {
                                            type: 'cross',
                                            label: {
                                                backgroundColor: '#6a7985'
                                            }
                                        }
                                    },
                                    toolbox: {
                                        show: true,
                                        feature: {
                                            dataZoom: {
                                                yAxisIndex: 'none'
                                            },
                                            dataView: { readOnly: false },
                                            magicType: { type: ['line', 'bar'] },
                                            restore: {},
                                            saveAsImage: {}
                                        }
                                    },
                                    grid: {
                                        left: '3%',
                                        right: '4%',
                                        bottom: '3%',
                                        containLabel: true
                                    },
                                    xAxis: [
                                        {
                                            type: 'category',
                                            boundaryGap: false,
                                            data: _that.incomeRecords.date
                                        }
                                    ],
                                    yAxis: [
                                        {
                                            type: 'value'
                                        }
                                    ],
                                    series: [
                                        {
                                            name: '营业额',
                                            type: 'line',
                                            stack: '金额',
                                            areaStyle: {},
                                            data: _that.incomeRecords.value,
                                            markPoint: {
                                                data: [
                                                    { type: 'max', name: '最高' },
                                                    { type: 'min', name: '最低' }
                                                ]
                                            },
                                            markLine: {
                                                data: [{ type: 'average', name: '平均' }]
                                            }
                                        }
                                    ]
                                };
                                echartsRecords.setOption(optionRecords);
                                // echarts 窗口缩放自适应
                                window.onresize = function () {
                                    echartsRecords.resize();
                                }
                            } else {
                                layer.msg(res.msg, {icon: 2}, 3000);
                            }
                        },
                        error: function (e) {
                            layer.msg('服务器错误', {icon: 2}, 3000);
                        }
                    });
                })
            },
            initCircle(){
                let _that = this;
                layui.use('echarts', function(){
                    /**
                     * 玫瑰图表
                     */
                    var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
                    var optionPies = {
                        title: {
                            text: '指标名称-玫瑰图',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                roseType: 'radius',
                                data: [
                                    {value: 335, name: '直接访问'},
                                    {value: 310, name: '邮件营销'},
                                    {value: 234, name: '联盟广告'},
                                    {value: 135, name: '视频广告'},
                                    {value: 368, name: '搜索引擎'}
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    echartsPies.setOption(optionPies);
                })
            }
        },
        created(){
            this.init();
            this.initChart();
            this.initCircle()
        }
    };
    const app = Vue.createApp(options);

    const vm = app.mount("#app");


</script>
</body>
</html>